<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax-原生写法</title>
</head>

<body>
  <input type="text" id="username" name="username" placeholder="username" />
  <span id="usernameHint"></span>

  <script>
    /*
        https://www.runoob.com/ajax/ajax-tutorial.html

        AJAX = Asynchronous JavaScript and XML
        AJAX 是一种在不重载整个页面的情况下对网页的某些部分进行更新的技术,
        传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面

        优点: 性能高,用户体检好

        如何使用AJAX
        1.原生JS写法, 根据底层原理一步一步完成AJAX请求的编写,费时费力...(学习原理的时候书写)
        2.jQuery框架发送AJAX请求, 代码精简,方便使用(早期开发中常用,现在jquery几乎淘汰,所以这种写法也基本不使用)
        
        二阶段学习
        3.ES678 promise/async的新语法发送AJAX请求,优化了原先原生JS的方式,代码量变少,相对简化(学习原理的时候书写)
        4.axios框架,现代化js框架发送ajax请求的方式,它的底层就是promise/async,相当于方式3的简化版本(目前企业开发使用AJAX的首选)
        5....
     */
    username.onblur = function () {
      //原生JS发送AJAX请求的步骤
      //1.创建ajax请求对象--XMLHttpRequest对象
      //注意: 对象的创建需要考虑兼容性
      let xhr
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        //兼容性
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      /*
        2.设置请求
          参数1: 请求类型,get/post
                 get请求数据拼接在url地址栏后面,相对不安全,速度较快,只能传输少量字符串数据
                 post请求数据封装在请求内部,相对安全,速度稍慢,可以传输大量数据
                 注意: 如果是post请求,必须在open之后额外添加一句代码
                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          
          参数2: 后台服务器地址
          参数3: 请求的同步还是异步,默认就是true表示异步(AJAX),false同步
       */
      //xhr.open('GET', 'http://localhost:8888/AjaxTeach/user/check?username=' + username.value, true)

      xhr.open('POST', 'http://localhost:8888/AjaxTeach/user/check', true)
      //POST请求专属代码
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

      /*
        3.发送请求
        注意: 
        如果是get请求,参数拼接在url地址栏后面,所以send中不需要传参,写null即可
        如果是post请求,则请求数据需要以特定的格式写在send函数中
      */
      //xhr.send(null)

      xhr.send('username=' + username.value)

      /* 
        4.监听ajax请求发送状态
        onreadystatechange事件是用来检测ajax请求状态的事件,
        readyState是ajax请求状态值,它有以下几个状态,
          0: 请求未初始化
          1: 服务器连接已建立
          2: 请求已接收
          3: 请求处理中
          4: 请求已完成，且响应已就绪

        status是HTTP状态码,常见状态码有:
          200         OK
          404         未找到
          500         服务端程序报错

          304         未更改,已缓存
          400         坏请求
          403         被拒绝,无权访问
          405         请求方式错误
      */
      xhr.onreadystatechange = function () {
        //判断请求是否发送成功并且正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
          //表示请求正确发送并且响应
          //5. 获取服务器的响应数据
          let result = xhr.responseText
          //6. 处理响应数据
          if (result == '1') {
            //表示该用户已被注册
            usernameHint.innerHTML = '该用户已被注册!'
          } else {
            usernameHint.innerHTML = ''
          }
        }
      }
    }
  </script>
</body>

</html>